<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2024-01-20
 -->

<template>
  <div class="node">
    <div class="section-group">
      <h3 class="h-6 my-2 text-lg font-semibold">外形</h3>
      <hr class="mb-1.5" />

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">背景</span>
        <span class="color-picker" @click.stop="showColorPicker('fill')" :style="{ background: nodeData.style.fill }">
          <el-color-picker v-show="nodeData.fillshow" v-model="nodeData.style.fill" @active-change="updateFill"></el-color-picker>
        </span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">边框</span>
        <span class="color-picker" @click.stop="showColorPicker('stroke')" :style="{ background: nodeData.style.stroke }">
          <el-color-picker v-show="nodeData.strokeshow" v-model="nodeData.style.stroke" @active-change="updateStroke"></el-color-picker>
        </span>
      </p>
    </div>

    <div class="section-group">
      <h3 class="h-6 my-2 text-lg font-semibold">文字</h3>
      <hr class="mb-1.5" />

      <span class="leading-loose">大小</span>

      <el-popover :visible="nodeData.fontsizeshow" placement="bottom">
        <template #reference>
          <span class="text-center float-right color-picker" @click="showColorPicker('fontsize'), (nodeData.fontsizeshow = true)">{{ nodeData.style.fontSize }}</span>
        </template>

        <template #default>
          <ul>
            <li class="text-xs font-semibold px-1 hover:bg-gray-400 hover:text-white" v-for="item in fontsize" :key="item" @click="pickFontSize(item), (nodeData.fontsizeshow = false)">字号：{{ item }}</li>
          </ul>
        </template>
      </el-popover>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">颜色</span>
        <span class="color-picker" @click.stop="showColorPicker('textFill')" :style="{ background: nodeData.style.textFill }">
          <el-color-picker v-show="nodeData.textfillshow" v-model="nodeData.style.textFill" @active-change="updateTextFill"></el-color-picker>
        </span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">样式</span>
        <span @click="setStyle" class="textPos float-right iconfont icon-qingxie" :class="{ active: nodeData.style.fontStyle === 'italic' }"></span>
        <span @click="setBold" class="textPos float-right iconfont icon-jiacu" :class="{ active: nodeData.style.fontWeight === 'bold' }"></span>
      </p>

      <p class="h-6 mt-0.5 clear-both">
        <span class="leading-loose">位置</span>
        <span @click="setTextPos('left')" class="textPos float-right iconfont icon-you" :class="{ active: nodeData.style.textPosition === 'left' }" style="transform: rotate(180deg)"></span>
        <span @click="setTextPos('bottom')" class="textPos float-right iconfont icon-arrow-down-last" :class="{ active: nodeData.style.textPosition === 'bottom' }"></span>
        <span @click="setTextPos('right')" class="textPos float-right iconfont icon-you" :class="{ active: nodeData.style.textPosition === 'right' }"></span>
        <span @click="setTextPos('top')" class="textPos float-right iconfont icon-arrow-down-last" :class="{ active: nodeData.style.textPosition === 'top' }" style="transform: rotate(180deg)"></span>
        <span @click="setTextPos('inside')" class="textPos float-right iconfont icon-juzhong" :class="{ active: nodeData.style.textPosition === 'inside' }"></span>
      </p>
    </div>

    <div class="section-group" v-if="multipleSelect">
      <h3 class="h-6 my-2 text-lg font-semibold">对齐方式</h3>
      <hr class="mb-1.5" />

      <ul>
        <li class="mx-1 textPos iconfont icon-halign" @click="align('horizontalAlign')"></li>
        <li class="mx-1 textPos iconfont icon-juzhongduiqi" @click="align('verticalAlign')"></li>
        <li class="mx-1 textPos iconfont icon-align-left" @click="align('leftAlign')"></li>
        <li class="mx-1 textPos iconfont icon-youduiqi" @click="align('rightAlign')"></li>
      </ul>
    </div>

    <div class="section-group">
      <h3 class="h-6 my-2 text-lg font-semibold">预制样式</h3>
      <hr class="mb-1.5" />

      <ul class="grid grid-rows-3 grid-cols-3 gap-1">
        <li class="w-12 h-5" @click="changeNodeStyle(item)" v-for="(item, index) in preStyle" :key="index" :style="{ background: item.fill, 'border-color': item.stroke }"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import preStyle from "./style";

export default {
  name: "node",
  props: ["node"],
  emits: ["change-group", "align-node"],
  data() {
    return {
      title: "Single Node",
      multipleSelect: false,
      fontsize: [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40],
      nodeData: {
        fillshow: false,
        strokeshow: false,
        textfillshow: false,
        fontsizeshow: false,
        style: {
          fill: "#fff",
          stroke: "rgba(255,255,255,0)",
          textFill: "rgba(255,255,255,0)",
          text: "",
          lineWidth: 1,
          opacity: 1,
          fontSize: 12,
          fontWeight: "normal",
          fontStyle: "italic",
          textPosition: "inside",
        },
        shape: {},
        z: 10,
      },
      preStyle: preStyle.node,
    };
  },

  methods: {
    showColorPicker(type) {
      switch (type) {
        case "fill":
          this.nodeData.strokeshow = false;
          this.nodeData.textfillshow = false;
          this.nodeData.fontsizeshow = false;
          this.nodeData.fillshow = !this.nodeData.fillshow;

          break;

        case "stroke":
          this.nodeData.fillshow = false;
          this.nodeData.textfillshow = false;
          this.nodeData.fontsizeshow = false;
          this.nodeData.strokeshow = !this.nodeData.strokeshow;

          break;

        case "textFill":
          this.nodeData.fillshow = false;
          this.nodeData.strokeshow = false;
          this.nodeData.fontsizeshow = false;
          this.nodeData.textfillshow = !this.nodeData.textfillshow;
          break;

        case "fontsize":
          this.nodeData.fillshow = false;
          this.nodeData.strokeshow = false;
          this.nodeData.textfillshow = false;
          break;
      }
    },

    updateFill(color) {
      this.nodeData.style.fill = color;
      this.$emit("change-node", { style: { fill: color } });
    },

    updateStroke(color) {
      this.nodeData.style.stroke = color;
      this.$emit("change-node", { style: { stroke: color } });
    },

    pickFontSize(size) {
      if (this.nodeData.style.fontSize != size) {
        this.nodeData.style.fontSize = size;
        this.$emit("change-node", { style: { fontSize: size } });
      }
    },

    updateTextFill(color) {
      this.nodeData.style.textFill = color;
      this.$emit("change-node", { style: { textFill: color } });
    },

    setStyle() {
      if (this.nodeData.style.fontStyle === "italic") {
        this.nodeData.style.fontStyle = "";
        this.$emit("change-node", { style: { fontStyle: "" } });
      } else {
        this.nodeData.style.fontStyle = "italic";
        this.$emit("change-node", { style: { fontStyle: "italic" } });
      }
    },

    setBold() {
      if (this.nodeData.style.fontWeight === "bold") {
        this.nodeData.style.fontWeight = "";
        this.$emit("change-node", { style: { fontWeight: "" } });
      } else {
        this.nodeData.style.fontWeight = "bold";
        this.$emit("change-node", { style: { fontWeight: "bold" } });
      }
    },

    setTextPos(pos) {
      if (this.nodeData.style.textPosition === pos) return;
      this.nodeData.style.textPosition = pos;
      this.$emit("change-node", { style: { textPosition: pos } });
    },

    align(align) {
      this.$emit("align-node", { align });
    },

    changeNodeStyle(style) {
      const { fill, stroke, fontSize } = style;

      this.nodeData.style.fill = fill;
      this.nodeData.style.stroke = stroke;
      this.nodeData.style.fontSize = fontSize;

      this.$emit("change-node", { style, z: this.nodeData.z });
    },
  },

  watch: {
    group: {
      handler(val) {
        if (!val) return;
        this.nodeData = { ...this.nodeData, ...this.node.getStyle() };
      },
      deep: true,
    },
  },
  //  End
};
</script>

<style lang="scss" scoped>
.section-group {
  padding: 0 10px;
  font-size: 12px;
  clear: both;
}

.color-picker {
  float: right;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  line-height: 24px;
}

.font-size-select {
  position: absolute;
  width: 240px;
  border: 1px solid #f5f5f5;
  z-index: 20;
  background: #fff;
  right: 0;
  line-height: 20px;
  padding: 6px;
}

.textPos {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  text-align: center;
  line-height: 24px;
  margin-left: 1px;
  border-radius: 3px;
  .textPos.active {
    background: #409eff;
    color: #fff;
  }
}
</style>
